<template>
    <div class="container">
        <van-icon name="arrow-left"  @click="gohome()"/>
      <ul class="tab">
        <li style="border-bottom:2px solid red;">未完成</li>
        <li @click="godone()">已完成</li>
      </ul>

    <div class="part">
        <van-cell title="任务名称" :value="this.task_name"/>
        <van-cell title="巡视性质" :value="this.properties"/>
        <van-cell title="开始时间" :value="this.start_time"/>
        <van-cell title="计划结束时间" :value="this.end_time"/>
    </div>
    <div style="height:40px;background-color:#F7F8FA"></div>

    <div class="part">
        <van-steps direction="vertical"  >
             <van-step style="height:80px; display:none;">
        <h4>【城市】物流状态1</h4>
        <p>2016-07-12 12:40</p>
      </van-step>
             <div v-for="(item) in goodlist" :key="item.id">
        <van-step>
            <h3>{{item.details_value}}</h3>
            <van-cell center title="是否故障">
                <template #right-icon>
                    <van-switch v-model="item.flag" size="24" @change="onInput(item.flag,item.index,item.dialogflag)" />
                </template>
            </van-cell>
            <van-cell class="error" title="故障"  :label="item.content"  v-show="item.flag"/>
        </van-step>
         <van-dialog v-model="item.dialogflag" title="故障报备" show-cancel-button  @confirm="confirm(item.message,item.flag,item.defect_whether,item.id)" @cancel="cancel()">
                <van-field
            v-model="item.message"
            rows="1"
            autosize
            label="故障"
            type="textarea"
            placeholder="请输入故障"
            />
        </van-dialog>


      </div>
    </van-steps>
    </div>
       
    
    <div class="footer">
    <van-button type="primary" round size="large" @click="done()">巡检完成</van-button>
    </div>
    </div>
</template>
<script>
import axios from "axios";
import { getCookie } from "Utils/cookie";
import { Toast,Dialog} from "vant";

export default {
      data() {
    return {
      list: [],
      task_name: "",
      start_time: "",
      end_time: "",
      properties:'',
      show: false,
      reviewer: "",
      goodlist: [],
      data3: [],
      flag1: true,
      flag2: false,
      flag3:'',
      approver_id: "",
      show1:false
      
    };
  },
  components:{
      "vant-dialog":Dialog.Component,
  },
    methods:{
        onInput(flag,index,dialogflag) {
          if(flag == true){
              flag = true;
            this.goodlist[index].dialogflag = true
            dialogflag = true;
          }      
    },
    confirm(message,flag,defect_whether,task_details_id){
       flag = true
        axios({
              url:'/hrkc/Task/updateTask_DetailsState',
              method:'POST',
              params:{
                defect_whether:'true',
                content:message,
                task_details_id:task_details_id,
              }
            }).then(
              console.log('chenggongla')
            )

        axios({
              url:'/hrkc/Faults/addFaults',
              method:'POST',
              params:{
                 content:message,
                 content_people:getCookie('approver_name'),
                 content_people_id:getCookie('approver_id'),
                 task_details_id:task_details_id,
                 task_id:this.list.task_id,
                 org_no:getCookie('org_no'),
              }
            }).then(console.log('成功'))
    },

    //巡检完成
    done(){
      axios({
        url:'/hrkc/Task/updateTaskstate',
        method:'POST',
        params: {
          task_id: this.list.task_id,
        }
      }).then(
          this.$router.push('/done')
      )

    },

    //跳转到选择页面
     gohome(){
      this.$router.push('/select');
    },
    //跳转到已完成页面
    godone(){
      this.$router.push('/done')
    },
     onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
      this.reviewer = item.name;
    },
    cancel() {
      this.flag3 = false;
    },
    },
    mounted() {
    this.list = JSON.parse(this.$route.query.data);
  console.l
    //获取当前申请记录的所有信息
    axios({
      url: "/hrkc/Task/getTask_Details",
      method: "POST",
      params: {
        task_id: this.list.task_id,
      }
    })
      .then(res => {
        this.properties = res.data.data[0].properties;
        this.end_time = res.data.data[0].end_time;
        this.start_time = res.data.data[0].start_time;
        this.task_name = res.data.data[0].task_name;
        for(var i=0;i<res.data.data1.length;i++){
          res.data.data1[i].index = i;
          if(res.data.data1[i].defect_whether!="true"){
            res.data.data1[i].flag = false;
          }else{
            res.data.data1[i].flag = true;
          }
          res.data.data1[i].dialogflag = false;
          res.data.data1[i].message = '';
        }
        this.goodlist = res.data.data1;
        console.log('11111',this.goodlist)
      })
      .catch(error => Promise.reject(error));

  }
    
}
</script>
<style lang="scss" scoped>
.tab{
  height:28px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 2px solid #ccc;
  li{
    font-size: 20px
  }
}
.part{
    background-color:#fff;
    margin-bottom: 20px;
}
.van-icon{
  position: relative;
  top:20px;
  left:0px;
}
.van-card {
  height: 90px;
}
.van-card__content {
  height: 70px;
}
.van-card__title {
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
.van-card__desc {
  height: 20px;
  line-height: 20px;
  font-size: 10px;
}
.van-card__num {
  margin-top: -80px;
  font-size: 10px;
}
.van-card__footer {
  margin-top: -60px;
}
.error{
  border-bottom: 1px solid #ccc; 
}
.type{
position: absolute;
top:60px;
left:10px
}
.footer {
  width:150px;
  position: relative;
  bottom: -60px;
  left:120px;
  .van-button {
    width: 150px;
  }
}
</style>
